<template>
  <div v-loading="pagelistLoading">
    <div class="bgf">
      <my-form
        v-model="queryParams"
        :config="fromConfigdetales"
        :slotleft-list="['inp']"
        :slot-list="['add']"
        @submit="searchHandle"
        @reset="resetQuery"
        @change="searchHandle"
      >
        <div slot="inp" style="margin-right: 0.1rem">
          <el-input
            v-model="queryParams.Key"
            size="small"
            placeholder="输入预约活动名称搜索"
          />
        </div>
      </my-form>
    </div>
    <MyTable
      :column="column"
      :data="list"
      :page-sizes="[50, 100, 200, 500]"
      :current-page.sync="totalParams.skipcount"
      :total="total"
      fromConfigdetale
      :page-size="totalParams.maxresultcount"
      pagination
      layout="total,sizes,prev,pager,next,jumper"
      @size-change="changePagination"
      @p-current-change="changecurrent"
      @handleCurrentChange="selectRow"
    />
    <el-dialog
      title="预约人数"
      :visible.sync="dialogTableVisible"
      width="600px"
    >
      <el-table :data="listAurInfo">
        <el-table-column property="aurname" label="姓名"></el-table-column>
        <el-table-column
          property="aurcardno"
          label="身份证号"
        ></el-table-column>
        <el-table-column property="aurmobile" label="手机号"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import MyForm from "@/components/MyForm/FormGenerator";
import page from "@/mixins/page";
import { fromConfigdetale } from "../column/makeinfo.js";
import { formatDate, formatTimeString } from "@/utils/date.js";
export default {
  name: "User",
  components: {
    MyForm,
  },
  filters: {},
  mixins: [page],
  data() {
    return {
      queryParams: {
        cityid: 1,
        AreaId: "0",
        orgid: "0",
        times: null,
        status: null,
        Key: null,
      },
      dialogTableVisible: false,
      gridData: [],
      totalParams: {},
      listAurInfo: [],
      column: [
        {
          type: "index",
          width: 60,
          label: "序号",
        },
        {
          prop: "appno",
          width: 200,
          label: "预约号",
        },
        {
          prop: "orgname",
          label: "预约陵园",
          showOverflowTooltip: true,
        },
        {
          prop: "personnum",
          label: "预约人数",
          width: 80,
          render: (h, scope) => {
            return (
              // <el-popover placement="right" width="400" trigger="click">
              //   <span
              //     slot="reference"
              //     onClick={() => {
              //       this.queryListArr(scope.row)
              //     }}
              //   >
              //     {scope.row.personnum}
              //     <i class="el-icon-view"></i>
              //   </span>
              // </el-popover>
              <span
                onClick={() => {
                  this.queryListArr(scope.row);
                }}
              >
                {scope.row.personnum}
                <i class="el-icon-view"></i>
              </span>
            );
          },
        },
        {
          label: "预约日期",
          prop: "appdate",
          width: 100,
          render: (h, scope) => {
            return (
              <span>
                {scope.row.appdate
                  ? formatDate(scope.row.appdate, "yyyy-MM-dd")
                  : null}
              </span>
            );
          },
        },
        {
          prop: "appbegintime",
          label: "预约时间段",
          width: 100,
          render: (h, scope) => {
            return (
              <span>
                {scope.row.appbegintime
                  ? `${formatTimeString(
                      scope.row.appbegintime,
                      "hh:mm"
                    )}-${formatTimeString(scope.row.appendtime, "hh:mm")}`
                  : null}
              </span>
            );
          },
        },
        { prop: "wxnickname", label: "微信昵称", showOverflowTooltip: true },
        {
          prop: "appusedstatusname",
          width: 100,
          label: "入园状态",
        },
      ],
      fromConfigdetales: fromConfigdetale(this),
      httpUrl: "QueryAppListByPaged",
    };
  },
  methods: {
    selectRow(val) {},
    queryListArr(item) {
      this.api.QueryAurInfo({ id: item.apnid }).then((res) => {
        this.dialogTableVisible = true;
        this.listAurInfo = res;
      });
    },
    changeHandle() {
      this.httpGetListActions();
    },
    resetQuery() {
      this.queryParams = {
        cityid: "0",
        AreaId: "0",
        orgid: "0",
        times: null,
        status: null,
        Key: null,
      };
      this.httpGetListActions();
    },
  },
};
</script>
